<template>
    <div class="secondkill">
        <div class="top">
            <div class="left">
                <img src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978468241.png?imageView2/2/format/webp"
                    alt="">
                <div class="timer">
                    <span>{{ hh }}</span>:
                    <span>{{ mm }}</span>:
                    <span>{{ ss }}</span>
                </div>
            </div>
            <div class="more">
                <span>更多</span>
                <i class="iconfont">&#xe61d;</i>
            </div>
        </div>
        <div class="seckill-container swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in data.goods" :key="item.id">
                    <img :src="item.goods_thumb" alt="">
                    <span class="title">{{ item.title }}</span>
                    <span class="newPrice">{{ item.price_formated }}</span>
                    <span class="oldPrice">{{ item.market_price_formated }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'

export default {
    props: ["data"],
    data() {
        return {
            swiper: null,
            intervalId: null,
            hh: '00',
            mm: '00',
            ss: '00',
            endTime: 0,
            isShow: false
        }
    },
    mounted() {
        this.updateEndTime()
        new Swiper('.seckill-container', {
            slidesPerView: 'auto',
            spaceBetween: 0,
            freeMode: true,
            freeModeSticky: true,
        })
        this.intervalId = setInterval(() => {
            this.updateTime()
            if (!this.isShow) {
                this.isShow = true
                this.$emit('showSk', this.isShow)
            }
            if (this.timeDifference() <= 0) {
                this.updateEndTime()
                this.isShow = false
                this.$emit('hideSk', this.isShow)
            }
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.intervalId)
    },
    methods: {
        timeDifference() {
            const diff = this.endTime - Date.now()
            return Math.max(0, Math.floor(diff / 1000))
        },
        formatTime(value) {
            return String(value).padStart(2, '0')
        },
        updateTime() {
            const totalSeconds = this.timeDifference()
            const hours = Math.floor(totalSeconds / 3600)
            this.hh = this.formatTime(hours)
            const remainingSeconds = totalSeconds % 3600
            const minutes = Math.floor(remainingSeconds / 60)
            this.mm = this.formatTime(minutes)
            const seconds = remainingSeconds % 60
            this.ss = this.formatTime(seconds)
        },
        updateEndTime() {
            const now = new Date();
            const hour = now.getHours();
            let targetHour;
            if (hour >= 8 && hour < 10) {
                targetHour = 10;
            } else if (hour >= 14 && hour < 16) {
                targetHour = 16;
            } else if (hour >= 20 && hour < 22) {
                targetHour = 22;
            } else {
                // 如果当前不在指定时间段，计算下一个时间段的开始时间
                const nextTimeRanges = [
                    { start: 8, end: 10 },
                    { start: 14, end: 16 },
                    { start: 20, end: 22 },
                ];
                let nextRange = null;
                for (const range of nextTimeRanges) {
                    if (hour < range.start) {
                        nextRange = range;
                        break;
                    }
                }
                if (!nextRange) {
                    nextRange = nextTimeRanges[0]; // 如果当天都已过，重置到第二天的第一个时间段
                }
                targetHour = nextRange.start;
            }
            const targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), targetHour, 0, 0);
            this.endTime = targetDate.getTime();
            this.updateTime()
        }
    }
}
</script>

<style scoped>
.secondkill {
    width: 100%;
    background-color: #fff;
}

.top {
    display: flex;
    width: 100%;
    height: 9.8667vw;
    justify-content: space-between;
    padding: 2.6667vw;
    box-sizing: border-box;
}

.top .left {
    display: flex;
    gap: 2.6667vw;
}

.top img {
    width: 18.6667vw;
    height: 15px;
}

.top .left span {
    background-color: black;
    color: #fff;
    font-size: 3.2vw;
    padding: 0 1.3333vw;
    border-radius: 2.6667vw;
}

.more {
    border-left: 1px solid #ccc;
    padding-left: 2.6667vw;
    cursor: pointer;
    font-size: 3.4667vw;
}

.seckill-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-bottom: 2.6667vw;
    padding-left: 2.6667vw;
}

.seckill-container .swiper-slide {
    width: 28.8vw;
}

.seckill-container img {
    width: 26.6667vw;
    height: 26.6667vw;
}

.seckill-container span {
    font-size: 3.2vw;
    display: block;
}

.seckill-container .title {
    width: 26.6667vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.seckill-container .newPrice {
    color: red;
    font-weight: bold;
    font-size: 3.7333vw;
    line-height: 8vw;
}

.seckill-container .oldPrice {
    text-decoration: line-through;
    color: #999;
}
</style>